<template>
	<div>
		<div class="header">
			<Header></Header>
		</div>

		<div class="center">
			<div class="col-main">
				<div class="main-wrap">

					<!-- 主体内容 -->
					<router-view />
				</div>
			</div>

			<aside class="menu">
				<ul>
					<li class="person active">
						<a href="index"><i class="am-icon-user"></i>个人中心</a>
					</li>
					<li class="person">
						<p><i class="am-icon-newspaper-o"></i>个人资料</p>
						<ul>
							<li> <a href="information">个人信息</a></li>
							<li> <a href="safety">安全设置</a></li>
							<li> <a href="address">地址管理</a></li>
							<li> <a href="cardlist">快捷支付</a></li>
						</ul>
					</li>
					<li class="person">
						<p><i class="am-icon-balance-scale"></i>我的交易</p>
						<ul>
							<li><a href="order">订单管理</a></li>
							<li> <a href="change">退款售后</a></li>
							<li> <a href="comment">评价商品</a></li>
						</ul>
					</li>
					<li class="person">
						<p><i class="am-icon-dollar"></i>我的资产</p>
						<ul>
							<li> <a href="points">我的积分</a></li>
							<li> <a href="coupon">优惠券 </a></li>
							<li> <a href="bonus">红包</a></li>
							<li> <a href="walletlist">账户余额</a></li>
							<li> <a href="bill">账单明细</a></li>
						</ul>
					</li>

					<li class="person">
						<p><i class="am-icon-tags"></i>我的收藏</p>
						<ul>
							<li> <a href="collection">收藏</a></li>
							<li> <a href="foot">足迹</a></li>
						</ul>
					</li>

					<li class="person">
						<p><i class="am-icon-qq"></i>在线客服</p>
						<ul>
							<li> <a href="consultation">商品咨询</a></li>
							<li> <a href="suggest">意见反馈</a></li>

							<li> <a href="news">我的消息</a></li>
						</ul>
					</li>
				</ul>
			</aside>
		</div>

		<div class="clear"></div>

		<Footer></Footer>

		<!--WebAPP底部导航栏 -->
		<!-- <WapBottomNav></WapBottomNav> -->
		
		<!--右侧辅助菜单 -->
		<RightSidebar></RightSidebar>
	</div>
</template>

<script>
	import Header from '@/components/Header.vue'
	import Footer from '@/components/Footer.vue'
	// import WapBottomNav from '@/components/WapBottomNav.vue'
	import RightSidebar from '@/components/RightSidebar.vue'
	
	require('amazeui/dist/js/amazeui.min.js')

	export default {
		name: 'Home',
		props: {
			msg: String
		},
		components: {
			Header,
			Footer,
			// WapBottomNav,
			RightSidebar
		},
		mounted() {

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	@import url("../../node_modules/amazeui/dist/css/amazeui.min.css");
	@import url("~@/assets/css/app.css");
	@import url("~@/assets/css/personal.css");
	
	body {
		background: #F5F8FA none repeat scroll 0% 0%;
	}
	
	.header >>> header {
		display: none;
	}
	
	@media only screen and (min-width:640px) {
		.header >>> header {
			display: block;
		}
	}
</style>
